import React, { createRef, PureComponent } from 'react'
import { CSSTransition } from 'react-transition-group'
import './style.css'
export class App extends PureComponent {
  constructor() {
    super()
    this.state = {
      isShow: true
    }
    this.divRef = createRef()
  }
  render() {
  const { isShow } = this.state
    return (
      <div>
        <button onClick={() => this.setState({ isShow: !isShow })}>显示与隐藏</button>
        {/* { isShow && <h2>哈哈哈</h2> } */}
        <CSSTransition
          nodeRef={this.divRef}
          unmountOnExit={true}
          in={isShow}
          classNames="why"
          timeout={1000}
          appear
          onEnter={() => console.log('开始进入动画')}
          onEntering={() => console.log('执行进入动画')}
          onEntered={() => console.log('执行进入动画结束')}
          onExit={() => console.log('开始离开动画')}
          onExiting={() => console.log('执行离开动画')}
          onExited={() => console.log('执行离开动画结束')}>
          <div ref={this.divRef}>
            <h2>哈哈哈哈</h2>
          </div>
        </CSSTransition>
      </div>
    )
  }
}

export default App